<template>
	<view class="toggle-shop">
		<view class="shop-text">门店列表</view>
		<!-- <uni-list>
			<uni-list-item showArrow clickable :title="item.shopName" :rightText="item.shopId"
				v-for="(item, index) in shopList" :key="index" @click="handleToggleShop(item)" />
		</uni-list> -->

		<uni-load-more class="loading-class" iconType="auto" v-if="shopLoading" status="loading" color="#999999" />
		<view class="radio-list" :style="{'max-height': shopListH + 'px'}" v-else>
			<van-radio-group v-model="toggleShopId">
				<van-cell-group>
					<van-cell v-for="(item, index) in shopList" :key="index" :title="item.shopName+'-'+item.shopId"
						clickable @click="handleToggleShop(item)">
						<template #right-icon>
							<van-radio :name="item.shopId" />
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</view>

		<view class="registered-shop" @click="handleRegisteredShop">
			<!-- <van-icon class="registered-icon" name="plus" /> -->
			<text>注册门店</text>
		</view>

		<view class="height"></view>
		<button class="toggle-btn" @click="submitToggle">确认切换</button>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				shopList: [],
				toggleShopId: '',
				shopLoading: false,
				shopListH: 0,
			}
		},
		onShow() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			if (tokenInfo) {
				this.toggleShopId = tokenInfo.shopId;
			}
			var that = this;
			uni.getSystemInfo({
				success(res) {
					console.log('系统信息', res);
					let phoneH = res.windowHeight;
					let shopListH = res.windowHeight - 220;
					that.shopListH = shopListH;
				}
			})
		},
		onLoad() {
			this.handleToggleShopList();
		},
		methods: {
			// 获取用户可切换门店列表
			handleToggleShopList() {
				const loginInfo = uni.getStorageSync("loginInfo");
				let openid = "";
				if (loginInfo && loginInfo.openid) {
					openid = loginInfo.openid;
				}
				this.shopLoading = true;
				let rqs = {
					"openId": openid
				}
				var that = this;
				apiRqs._getUserToggleShopList(rqs).then((res) => {
					console.log('可切换门店列表', res);
					that.shopLoading = false;
					if (res.code == 200) {
						that.shopList = res.data;
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
			handleToggleShop(item) {
				this.toggleShopId = item.shopId;
			},
			submitToggle() {
				var that = this;
				getApp().showLoading();
				uni.login({
					provider: "weixin",
					success(loginRes) {
						console.log(loginRes);
						let code = loginRes.code;
						let rqs = {
							"code": code,
							"shopId": that.toggleShopId
						}
						apiRqs._toggleShop(rqs).then((res) => {
							console.log('切换结果', res);
							uni.hideLoading();
							if (res.code == 200) {
								uni.setStorageSync("loginInfo", res.data);
								uni.request({
									url: "https://bydapi.vaubang.cn/api/v1/WxOpen/GetTokenInfo",
									method: "post",
									header: {
										"content-type": "application/json;charset=utf-8;",
										'Authorization': 'Bearer ' + res.data.token
									},
									success(aRes) {
										console.log('解析token', aRes.data.data);
										if (aRes.data.code == 200 && aRes.data.data !=
											null) {
											uni.setStorageSync("tokenInfo", aRes.data.data);
											getApp().showToast("切换成功", "success");
											setTimeout(() => {
												uni.reLaunch({
													url: "/pages/workbench/workbench"
												})
											}, 1500)
										}
									},
									fail(err) {
										console.log(err);
									}
								})

							} else {
								getApp().showToast(res.msg);
							}
						}).catch((err) => {
							console.log('err', err);
						})
					}
				})
			},
			handleRegisteredShop() {
				uni.navigateTo({
					url: "/packageA/bind/bind"
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.toggle-shop {
		.radio-list {
			margin: 0 20px;
			overflow-y: auto;

			.van-cell {
				padding: 15px 16px;

				&:first-child {
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}
			}
		}

		.shop-text {
			font-size: 16px;
			color: rgba(0, 0, 0, 0.9);
			padding: 20px;
		}

		.registered-shop {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10px 20px calc(35pt + 40px + 15px) 20px;
			background-color: #fff;
			color: #666;
			font-size: 16px;
			padding: 15px 16px;
			box-sizing: border-box;
			color: #008aff;
			border-radius: 4px;

			&:active {
				background-color: #f1f1f1;
			}

			.registered-icon {
				font-size: 15px;
				margin-right: 3px;
			}

			box-shadow: 4px 0px 20px rgba(0, 0, 0, 0.05);
		}

		.toggle-btn {
			position: absolute;
			bottom: 40px;
			left: 20px;
			right: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 16px;
			height: 35pt;
			line-height: 35pt;

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
